<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <h1>axios基础使用</h1>
  <button id="btn">发送请求</button>
  <script>
    // const oBtn = document.getElementById('btn')
    // oBtn.onclick = async function () {
    //   try {
    //     const re = await axios({
    //       url: 'user',
    //       method: 'get',
    //       headers: {},
    //       params: {
    //         userId: '001'
    //       },
    //       data: {},
    //       timeout: 10000
    //     })
    //     console.log(re);
    //     console.log(re.data);
    //   } catch (e) {
    //     console.log(e.message);
    //   }
    // }

    const oBtn = document.getElementById('btn')
    oBtn.onclick = async function () {
      try {
        //axios方法返回一个promise实例,成功的被re接受了,如果请求失败则进入catch异常处理中
        const re = await axios({
          url: '/user',
          method: 'get',
          // 即将与请求一起发送的url参数
          parse: {
            userId: '001'
          },
          // 请求体参数，只适用于post和put
          data: {},
          timeout: 1000
        })
        /* 
          axios成功的值这个对象属性解析:
            - config:是axios请求的时候传入的配置对象
            - data:后端响应的数据
            - headers:响应头
            - request:底层真正使用的xhr实例对象
            - status:响应状态码
            - statusText:响应状态描述
        */
        console.log(re);
        console.log(re.data);
      } catch (e) {
        console.log(e.massage);
      }

    }
  </script>
</body>

</html>